<script setup>

// import { UTextarea } from '#build/components';

import dayjs from 'dayjs';
useHead({
	title: 'HLS: Интернет-запись',
})
definePageMeta({
	layout: "call",
})
const urlHome = useUrl();
const mpp = useCookie('mpp');
// const fio_user =useCookie('')
const exampleName = ref('');
const isOpen = ref(false);
const valueNote = ref('');
const valueKeyid = ref(0)
// const { data: examples, refresh: refreshExample } = await useFetch(`${urlHome.value}call/hello_get_message/`)

const { data: fromAriadna, refresh: comListRefresh } = await useFetch(`${urlHome.value}call/get_from_ariadna/`)

async function addExample() {
	console.log("mpp: ", mpp.value)
	const response = await $fetch(`${urlHome.value}call/hello_post_message/`, {
		method: 'POST',
		body: {
			name: exampleName.value,
			mpp: mpp.value
		}
	})
	if (response) {
		console.log('ok')
		refreshExample()
	}
}

async function deleteExample(example_id) {
	const response = await $fetch(`${urlHome.value}call/hello_delete_message/`, {
		method: 'DELETE',
		body: {
			mpp: mpp.value,
			example_id: example_id,
		}
	})
	if (response) {
		refreshExample()
	}
}


async function openModal(keyid_, note_) {
	valueNote.value = note_
	valueKeyid.value = keyid_
	isOpen.value = true
}


const { status, data, send, close } = useWebSocket('ws://192.168.100.48:8008/ws', {
	autoReconnect: true,
})


async function saveKom() {
	const response = await $fetch(`${urlHome.value}call/upd_rnumb_note/`, {
		method: 'POST',
		body: {
			updnote: valueNote.value,
			keyid: valueKeyid.value
		}
	})
	if (response) {
		const sendObject = {
			"keyid": valueKeyid.value,
			"note": valueNote.value,
		}
		console.log(sendObject)
		send(JSON.stringify(sendObject))
		console.log('ok')
		comListRefresh();
	} else {
		alert("Ошибка сохранения комментария " + response.message);
	}
	isOpen.value = false;
}

</script>

<template>
	<div>
		<!-- <NuxtLink to="/menu">
			<UButton>Меню</UButton>
		</NuxtLink>
		<h1></h1>
		<br> -->
		<div class="p-2 font-bold text-red-500">Список пациентов, записавшихся через интернет</div>
		<br>
		<!-- <div class="w-full max-w-80 flex flex-row gap-2">
			<div>
				<UInput v-model="exampleName" @keyup.enter="addExample" />
			</div>
			<div>
				<UButton @click="addExample" label="Поиск" />
			</div>
		</div> -->
		<!-- <div v-auto-animate>
			<div v-for="val in examples.sort((a, b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0))"
				:key="val.id">
				<div>{{ val.name }}
					<UButton @click="deleteExample(val.id)" label="delete" />
				</div>
			</div>
		</div> -->
		<div>
			<table id="patientInt">
				<thead class="sticky-header">
					<tr>
						<th>№ карты</th>
						<th>ФИО пациента</th>
						<th>Дата рождения</th>
						<th>Телефон</th>
						<th>Дата посещения</th>
						<!-- <th>Время</th> -->
						<th>Врач</th>
						<th>Комментарий</th>
						<th>Подразделение</th>
						<th>Дата обращения</th>
						<!-- <th>ВТ</th> -->
					</tr>
				</thead>
				<tbody>
					<template v-for="value in fromAriadna" :key="value.keyid"
						class="flex gap-2 text-right font-mono place-content-evenly">
						<tr>
							<td class="font-mono">{{ value.num }}</td>
							<td class="font-mono">{{ value.lastname }} {{ value.firstname }} {{ value.secondname }}</td>
							<td class="font-mono">{{ value.birthdate }}</td>
							<td class="font-mono">{{ value.cellular }}</td>
							<td class="font-mono">{{ value.dd }}</td>
							<!-- <td class="font-mono">{{ value.cellular }}</td> -->
							<td class="font-mono">{{ value.doc }}</td>
							<td class="font-mono" @click="openModal(value.keyid, value.note)">{{ value.note }}</td>
							<td class="font-mono">{{ value.dep_text }}</td>
							<td class="font-mono">{{ value.updatedate }}</td>
						</tr>
					</template>
				</tbody>
			</table>

		</div>
		<!-- модальное окно для ввода примечания -->
		<UModal v-model="isOpen" :ui="{ base: 'max-w-4xl', width: '' }">
			<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
				<!-- <template #header>
					<div class="flex place-content-end">
						<UButton color="gray" variant="ghost" 
						    icon="i-heroicons-x-mark-20-solid" 
						    class="-my-1"
							@click="isOpen = false" />
					</div>
				</template> -->
				<!-- <div class="font-bold"> -->
				<!-- Итого {{ naryadsSumm.toLocaleString() }}р.</div> -->
				<div class="form-control px-2">
					<UTextarea v-model="valueNote" autoresize @keyup.enter="saveKom" @keyup.esc="isOpen = false"
						class="max-w-xs" color="primary" variant="outline" />
					<br>
					<!-- {{ valueKeyid }} -->
					<!-- placeholder="Введите комментарий"  -->
					<div class="flex justify-around gap-2">
						<UButton class="btn btn-sm my-1 custom-close__button umodal__shut" @click="valueNote = ''">
							Очистить</UButton>
						<UButton class="btn btn-sm my-1 custom-close__button umodal__shut" @click="saveKom">
							Сохранить</UButton>
						<UButton @click="isOpen = false" class="btn btn-sm my-1">
							Закрыть</UButton>
					</div>
				</div>
				<!-- v-if="kom_edited.length > 0" -->
				<!-- </div> -->

			</UCard>
		</UModal>

	</div>
</template>


<style scoped>
#patientInt {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

#patientInt td,
#patientInt th {
	border: 1px solid #ddd;
	padding: 8px;
}

#patientInt tr:nth-child(even) {
	background-color: #f2f2f2;
}

#patientInt tr:hover {
	background-color: #ddd;
}

#patientInt th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	background-color: #04AA6D;
	color: white;
}

.sticky-header {
	position: sticky;
	top: 0;
	background-color: white;
	/* или другой цвет фона */
	z-index: 49;
	/* чтобы обеспечить, что элемент находится над другими */
}
</style>
